<template>
    <div class="classify">
        <el-button size='small' @click='addHandler'>新增</el-button>
        <!-- 表格 -->
        <el-table
            size='small'
            :data="categories"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="name"
                label="分类名称"
                width="200">
            </el-table-column>
            <el-table-column
                prop="description"
                label="分类简介">
            </el-table-column>
            <el-table-column
                prop="no"
                label="序号"
                width="80">
            </el-table-column>
            <el-table-column
                label="操作"
                width="80">
                <template v-slot='scope'>
                    <span @click='toEdit(scope.row)'>修改</span>
                    <span @click='toDelete(scope.row)'>删除</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 模态框 -->
        <el-dialog title="录入分类信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="form.no" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import qs from 'qs'
export default {
    data(){
        return {
            categories:[],
            dialogFormVisible:false,
            form:{},
            formLabelWidth:'120px'
        }
    },
    created(){
        this.findAllCategory()
    },
    methods:{
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 封装参数
                let obj = {
                    id:item.id
                }
                axios({
                    url:'http://121.199.29.84:8001/category/deleteById',
                    method: 'get',
                    params:obj
                }).then((res)=>{
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                    // 更新数据
                    this.findAllCategory()
                })
            }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                });        
            });
        },
        // 修改
        toEdit(item){
            // 显示模态框
            this.dialogFormVisible = true;
            // 将当前行数据放入模态框
            this.form = JSON.parse(JSON.stringify(item))
        },
        // 新增或修改栏目
        saveHandler(){
            axios({
                url:'http://121.199.29.84:8001/category/saveOrUpdate',
                method:'POST',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                // 提示信息
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
                // 更新数据
                this.findAllCategory()
                // 关闭模态框
                this.dialogFormVisible = false
            })
        },
        // 显示模态框
        addHandler(){
            // 清空表单
            this.form = {}
            this.dialogFormVisible = true;
        },
        // 查询所有栏目
        findAllCategory(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method: 'GET',
            }).then((res)=>{
                this.categories = res.data.data
            })
        },
    }
}
</script>